使用組件有三個步驟

1. 宣告建構子(Constructor)
2. 註冊組件(Regist Component)
   2.5 建立組件(Create Component)
3. 掛載組件(Mount Component)

前兩項已經介紹過，也可以簡化成一個步驟。

<script>
Vue.component('example', require('./components/Example.vue'));

var app = new Vue({
    el: '#app'
});
</script>

介紹最後一項 - 組件掛載(mount)。
先複習一下，透過模板(template)的基本掛載法：

<div id="app">
    <!-- Instance 掛載兩個 example 組件 -->
    <example id="1"></example>
    <example id="2"></example>
</div>

真實情況可能不只一種組件，需要依照情況掛載

<script>
Vue.component('viewer', require('./components/Example.vue'));
Vue.component('editor', require('./components/Editor.vue'));

var app = new Vue({
    el: '#app',
    data: {
        state: 'viewer'
    },
    methods: {
        toggle: function() {
            return (this.state === 'viewer') ? 'editor' : 'viewer';
        }
    }
});
</script>

透過is屬性動態掛載，按當時情境決定，絕對實用。

<div id="app">
    <button type="button" @click="toggle">{{ state }}</button>
    <div is="state"></div>
    <div is="state"></div>
    
    <!-- state: 'viewer' -->
    <!--
    <viewer></viewer>
    <viewer></viewer>
    -->
    
    <!-- state: 'editor' -->
    <!--
    <editor></editor>
    <editor></editor>
    -->
    
</div>

如果你有興趣的話，可以延伸到vue-router換頁面的機制。

最後補充進階的手動掛載 - 透過Vue建構子 或 $mount API
官方文件寫得很清楚，你可以透過已宣告的建構子，掛載新的組件。

<!-- 宣告建構子 -->
var Example = Vue.extend({
  template: '<div>Here is Example</div>'
});

1. 透過建構子掛載

<!-- 這會把#app內容完全換掉 -->
new Example({ el: '#app' })

掛載前的等效樣板

<div id="app">
    <example></example>
    <example></example> 
</div>

掛載後

<div id="app">
    <!-- 前面兩個 <example> 都不見了 -->
    <example></example>
</div>

2. 給$mount掛載點

new Example().$mount('#app');

跟(1)相同，完全換掉#app內容

當你加上新的組件，又不想蓋掉原內容，參考這種做法
3. 不給$mount掛載點
當你不指定時，$mount會把產生的新組件掛在document之外(畫面上看不到)。

var example3 = new Example().$mount()
document.getElementById('app').appendChild(example3.$el)

<div id="app">
    <example></example>
    <example></example>
    <!-- 新產生的組件 -->
    <example></example>
</div>

但這種做法並不推薦，畢竟Vue是data-driven，能夠避免直接操作DOM，就盡量避免。